<template>
  <div class="set-pass">
    <div class="fy_content">
      <!-- 设置密码头部 -->
      <div class="fy_header">
        <h3>设置密码</h3>
        <!-- 点击跳转到信息填写路由 -->
        <span @click="fy_toSetmessage1()">跳过</span>
      </div>
      <!-- 设置密码主体 -->
      <div class="fy_box">
        <div class="fy_num">
          <input
            type="text"
            minlength="6"
            maxlength="11"
            placeholder="请输入登录密码"
            v-model="fy_zc_pass"
          />
        </div>
        <div class="fy_num">
          <input
            type="text"
            minlength="6"
            maxlength="11"
            placeholder="请再次输入密码"
            v-model="fy_zc_pass1"
          />
        </div>
        <!-- 确定按钮 -->
        <div class="fy_login">
          <!-- 点击跳转到信息填写路由 -->
          <van-button
            round
            type="warning"
            eb6100
            size="large"
            class="fy_button"
            @click="fy_toSetmessage()"
          >确定</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "set-pass",
  data() {
    return {
      fy_zc_pass: "",
      fy_zc_pass1: "",
      id: 0,
      zjb_ipone: ""
    };
  },
  mounted() {
    // console.log(this.$route.query.zc_sjh)
  },
  methods: {
      //-->点击跳过，直接跳转路由
      fy_toSetmessage1(){
            this.$router.push("/set-message");
      },
    // 跳转到信息填写路由
    fy_toSetmessage() {
      this.axios
        .post(
          "https://test.365msmk.com/api/app/password",
          {
            //--->获取浏览器储存用户输入的手机号
            mobile: sessionStorage.getItem("ipone"),
            //--->获取用户输入的密码
            password: this.fy_zc_pass,
            //--->获取浏览器储存用户输入的验证码
            sms_code: sessionStorage.getItem("yan")
          },
          {
            //--->获取浏览器储存用户登录后获取的令牌，token
            headers: {
              Authorization: "Bearer " + sessionStorage.getItem("token")
            }
          }
        )
        .then(ret => {
          console.log("====================================");
          console.log(ret);
          console.log("====================================");
          var bool = true;
          var bool2 = true;

          var yz_pass = /^\w{6,16}$/;
          if (!yz_pass.test(this.fy_zc_pass) || this.fy_zc_pass == "") {
            this.$toast("密码是由6-16位的数字、字母、下划线组成");
            bool = false;
            return false;
          } else {
            bool = true;
          }

          if (this.fy_zc_pass1 !== this.fy_zc_pass) {
            this.$toast("两次密码输入不一致");
            bool2 = false;
            return false;
          } else {
            bool2 = true;
          }

          if (bool && bool2) {
            this.$router.push("/set-message");
          }
        });
    }
  },
  computed: {}
};
</script>

<style lang='scss' scoped>
html,
body,
.set-pass {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.fy_content {
  width: 100%;
  .fy_header {
    width: 100%;
    height: 0.75rem;
    display: flex;
    padding: 0 0.1rem;
    justify-content: space-between;
    h3 {
      width: 60%;
      font-size: 0.3rem;
      line-height: 0.75rem;
      font-weight: 500;
      text-align: right;
    }
    span {
      display: block;
      font-size: 0.25rem;
      height: 100%;
      width: 0.8rem;
      line-height: 0.75rem;
    }
  }
  .fy_box {
    width: 100%;
    .fy_num {
      font-size: 0.3rem;
      width: 5rem;
      padding: 0 1.1rem;
      input {
        border: 0;
        display: block;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0.3rem 0;
        height: 100%;
        font-size: 0.25rem;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        line-height: 0.3rem;
        float: left;
        outline: none;
      }
    }
    .fy_login {
      width: 6.4rem;
      height: 1.2rem;
      text-align: center;
      .fy_button {
        width: 80%;
        font-size: 0.25rem;
        margin-left: 0;
      }
    }
  }
}
</style>
